<template>
  <div>
    <a-card :body-style="{ width: '100%', overflow: 'auto' }">
      <div class="h-[300px] w-full">
        <BaseTitle title="关注项目患者占比" />
        <div id="visit" class="h-[270px]">
          <a-empty class="pt-8" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { message } from 'ant-design-vue'
import echarts from '@/utils/echarts'

//个人门诊图表pie
const initClassifyChart = async () => {
  const { code, data = [], msg } = await post('/statistic/dictFocusItemProportion')
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  const total = data.reduce((x, y) => x + y.count, 0)
  const chartData = data.map((x) => {
    return {
      name: x.itemName,
      value: x.count,
      label: {
        show: false
      }
    }
  })

  const dom = document.getElementById('visit')
  if (!dom) return
  const chart = echarts.init(dom)
  chart.setOption({
    tooltip: {
      trigger: 'item'
    },
    title: {
      text: '总人数：' + total + '人',
      textStyle: {
        fontSize: 12
      },
      left: '55%',
      top: '0'
    },
    legend: {
      orient: 'vertical',
      show: screen.width > 1440,
      itemWidth: 4,
      itemHeight: 4,
      selectedMode: false,
      top: '8%',
      left: '55%'
    },
    series: [
      {
        type: 'pie',
        right: '45%',
        label: { show: true },
        color: ['#1267F5', '#FF98BF', '#33CC99', '#FFD184', '#37B5F1', '#84E5D2', '#9933FF', '#CC33FF', '#9999FF'],
        // 内环外环
        radius: ['40%', '70%'],
        emphasis: {
          disabled: true
        },
        data: chartData
      }
    ]
  })
}

onMounted(() => {
  initClassifyChart()
})
</script>
<style lang="less" scoped>
:deep(.ant-tabs-nav) {
  &::before {
    border-bottom: none;
  }
}
.card-item {
  width: 23%;
  padding: 8px 16px;
  border-radius: 4px;
}
</style>
